﻿<UserControl x:Class="AgileToDo.UTodoItem"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:UCtrl="clr-namespace:AgileToDo.Common" mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300"
             MouseDoubleClick="UserControl_MouseDoubleClick"
             MouseLeftButtonDown="UserControl_MouseLeftButtonDown"
             >
    <UserControl.Resources>
        <UCtrl:DateTime2BoolConverter  x:Key="dateTimeConverter"/>
        <UCtrl:DateTime2BrushConverter  x:Key="datetime2BrushConverter"/>
        <UCtrl:DateTime2TextDecorationsConverter  x:Key="dateTime2TextDecorationsConverter"/> 
            <Storyboard  x:Key="sbShow">
                <DoubleAnimation
                     Storyboard.TargetName="imgClose"
                    Storyboard.TargetProperty="Opacity" 
                    From="0" To="1" Duration="0:0:0.01"
                    />
            <ThicknessAnimation   Storyboard.TargetName="border"
                    Storyboard.TargetProperty="BorderThickness" 
                    From="1,1,1,1" To="2,2,2,2" Duration="0:0:0.01" />

        </Storyboard>
            <Storyboard  x:Key="sbHide">
                <DoubleAnimation
                      Storyboard.TargetName="imgClose"
                    Storyboard.TargetProperty="Opacity" 
                    From="1" To="0" Duration="0:0:0.01"
                    />
            <ThicknessAnimation   Storyboard.TargetName="border"
                    Storyboard.TargetProperty="BorderThickness" 
                    From="2,2,2,2" To="1,1,1,1" Duration="0:0:0.01" />
        </Storyboard>
    </UserControl.Resources>
    <Canvas Height="35" Margin="0.9" >
        <Border x:Name="border" Height="35"  CornerRadius="1"  
            BorderThickness="1"
            Background="{Binding FinishTime, Converter={StaticResource datetime2BrushConverter},Mode=OneWay}">
            <Border.Triggers>
                <EventTrigger RoutedEvent="Border.MouseEnter">
                    <BeginStoryboard Storyboard="{StaticResource sbShow}"/>
                </EventTrigger>
                <EventTrigger RoutedEvent="Border.MouseLeave">
                    <BeginStoryboard Storyboard="{StaticResource sbHide}"/>
                </EventTrigger>
            </Border.Triggers>

            <Grid >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="512" />
            </Grid.ColumnDefinitions>
            <CheckBox  Margin="3,0,3,0" VerticalAlignment="Center" Grid.Column="0" 
                       IsChecked="{Binding FinishTime, Converter={StaticResource dateTimeConverter},Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
                       x:Name="cbxFinished" Click="cbxFinished_Click" />
                <TextBlock VerticalAlignment="Center" FontSize="14" x:Name="label" Grid.Column="1"   TextWrapping="NoWrap"
                       Text="{Binding ElementName=tbx,Path=Text,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" 
                       TextDecorations="{Binding FinishTime, Converter={StaticResource dateTime2TextDecorationsConverter},
                    Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" Foreground="White" />
                <TextBox  FontSize="14"  x:Name="tbx" Grid.Column="1" Visibility="Collapsed" TextWrapping="Wrap"
                         Text="{Binding ToDoName, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" LostFocus="tbx_LostFocus" />
        </Grid>
    </Border>
        <Image x:Name="imgClose" Height="20" Width="20" Canvas.Right="7" 
               ToolTip="Delete"
               Source="image\delete.png" Canvas.Top="7"
               Opacity="0"
               MouseLeftButtonDown="Image_MouseLeftButtonDown" >
            <Image.Triggers>
                <EventTrigger RoutedEvent="Image.MouseLeave">
                    <BeginStoryboard Storyboard="{StaticResource sbHide}"/>
                </EventTrigger>
               <EventTrigger RoutedEvent="Image.MouseEnter">
                    <BeginStoryboard Storyboard="{StaticResource sbShow}"/>
                </EventTrigger>
              
            </Image.Triggers>
        </Image>

    </Canvas>
</UserControl>
